<template>
	<uni-popup ref="inputCompanyPopup" type="center" maxHeight="100vh" width="none" :maskClick="false" :isRadius="true">
		<div class="input_wrap">
			<div class="input_box">
				<input type="text" class="input" placeholder="请输入公司名称" v-model="name" />
				<div class="clear" v-show="name" @click="name = ''">
					<i class="iconfont iconclose" />
				</div>
			</div>
			<div class="submit_btn" :class="{on: name}" @click="submit">确认提交</div>
			<div class="input_company_tip">tips: 提交后可在管理中心完善资料中修改。</div>
		</div>
	</uni-popup>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import { editUserApi } from '@/api/system'
export default {
	name: 'InputCompany',
	components: {
		uniPopup
	},
	data() {
		return {
			name: ''
		}
	},
	methods: {
		closeMask() {
			this.closePopup()
			this.$emit('update:show', false)
		},
		submit() {
			if (!this.name) {
				uni.showToast('请输入公司名称')
				return
			}
			editUserApi({ nick_name: this.name }).then(res => {
				console.log(res)
				// if (res.status === 'success') {
				// uni.showToast('修改成功')
				this.$emit('updateUserInfo')
				// } else {
				// 	uni.showToast(res.errors.message)
				// }
			})
		},
		openPopup() {
			this.$refs.inputCompanyPopup.open()
		},
		closePopup() {
			this.$refs.inputCompanyPopup.close()
		}
	}
}
</script>

<style scoped lang="scss">
	.input_wrap {
		width: 560px;
		padding: 256px 30px 46px;
		background: url($imgUrl + 'design/company/input_company_bg.png') no-repeat center top/100% 256px #fff;
    	border-radius: 32px;
		.input_box {
			position: relative;
			.input {
				display: block;
				width: 100%;
				text-indent: 30px;
				margin-top: 58px;
				height: 90px;
				background: rgba(255, 255, 255, 1);
				border: 1px solid rgba(221, 221, 221, 1);
				border-radius: 45px;
				&::placeholder {
					font-size: 32px;
					color: #ccc;
				}
			}
			.clear {
				position: absolute;
				right: 29px;
				top: 50%;
				margin-top: -15px;
				width: 30px;
				height: 30px;
				background: rgba(204, 204, 204, 1);
				border-radius: 50%;
				text-align: center;
				line-height: 30px;
				.iconclose {
					color: #fff;
					font-size: 11px;
				}
			}
		}

		.submit_btn {
			margin-top: 30px;
			height: 90px;
			line-height: 90px;
			background: rgba(204, 204, 204, 1);
			border-radius: 45px;
			font-size: 32px;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			&.on {
				background: rgba(255, 209, 26, 1);
				color: rgba(58, 27, 4, 1);
			}
		}
		.input_company_tip {
			text-align: center;
			font-size: 24px;
			line-height: 1;
			margin-top: 29px;
			color: rgba(153, 153, 153, 1);
		}
	}
</style>
